<template>
	<div class="page-createPaln">
		<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose" :fullscreen="true">
			<el-form ref='form' :model='form'>
				<div class="page-createPaln-content">
					<div class="page-header">
						<span class="pageheader-item" @click="dialogVisible = false"><i
								class="el-icon-arrow-left"></i></span>
						<span class="pageheader-item trigger-type">{{triggerType}}</span>
						<el-input class="pageheader-item plan-name" v-model="form.planName"  placeholder='请输入计划名称'
							style="width: 200px;border-color: #f04943"></el-input>
						<div class="pageheader-item group-filter">
							<span>分组</span>
							<el-select v-model="form.groupValue" placeholder="请选择" style="width: 120px;">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>

					<div class="left-bar">
						<el-steps direction="vertical" :active="activeIndex">
							<el-step icon="el-icon-position" title="触发条件" style="height: 100px;">
								<template slot='description'>
									<div class="description">
										<div class="tags">
											<span class="brown">触发型</span>
											<span class="violent">完成A未完成B</span>
										</div>
										<div class="trigger-time">
											<span class="sub-title"><i class="el-icon-time"></i> 触发时间：</span>
											<span class="sub-content">满足触发条件后立即触达</span>
										</div>
										<div class="start-end-time">
											<span class="sub-title"><i class="el-icon-time"></i> 起止时间：</span>
											<span class="sub-content">2021-10-30 00:00 至 2021-11-01 00:00</span>
										</div>
									</div>
								</template>
							</el-step>
							<el-step icon="el-icon-user-solid" title="受众用户">
								<template slot='description'>
									<div class="description">
										<div class="tags">
											<span class="brown">278人</span>
										</div>
										<div class="description-item">
											<i class="el-icon-user-solid"></i>
											<span class="description-item-title">用户属性：</span>
											<span>满足3个条件</span>
										</div>
										<div class="description-item">
											<i class="el-icon-user-solid"></i>
											<span class="description-item-title"> 用户行为：</span>
											<span>满足3个条件</span>
										</div>
										<div class="description-item">
											<i class="el-icon-user-solid"></i>
											<span class="description-item-title"> 行为序列：</span>
											<span>满足3个条件</span>
										</div>
									</div>
								</template>
							</el-step>
							<el-step icon="el-icon-message" title="触达配置">
								<template slot='description'>
									<div class="description">
										<div class="tags">
											<span class="brown">触发型</span>
											<span class="violent">完成A未完成B</span>
										</div>
									</div>
								</template>
							</el-step>
							<el-step icon="el-icon-place" title="目标设置">
								<template slot='description'>
									<div class="description">
										<div class="tags">
											<span class="brown">触发型</span>
											<span class="violent">完成A未完成B</span>
										</div>
									</div>
								</template>
							</el-step>
						</el-steps>
					</div>

					<div class="right-board">
						<board0 v-show="activeIndex == 0" :boardData = 'board0Data' @board0="handleBoard0Change"></board0>

						<board1 v-show="activeIndex == 1" :boardData = 'board1Data' @board1="handleBoard1Change" ></board1>

						<board2 v-show='activeIndex == 2' :boardData = 'board2Data' @board2="handleBoard2Change"></board2>

						<board3 v-show="activeIndex == 3" :boardData = 'board3Data' @board3="handleBoard3Change"></board3>

						<div class="btns">
							<div class="previous" v-if="activeIndex >=1" @click="activeIndex  -= 1">
								上一步
							</div>
							<div class="next" v-if="activeIndex <= 2" @click="activeIndex += 1">
								下一步
							</div>
							<div class="submit" @click="submitForm">
								发 布
							</div>
						</div>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>
<style>

</style>
<script>
	import { getTriggerType, formatTime, formatDate } from './utils.js'
	import board0 from './createPlan/board0.vue'
	import board1 from './createPlan/board1.vue'
	import board2 from './createPlan/board2.vue'
	import board3 from './createPlan/board3.vue'
  import {addOperatePlan, updatePlan} from "../../../api/operate/plans";
	export default {
		name: "createPaln",
		components: {
			board0,
			board1,
			board2,
			board3
		},
		props:{
			triggerTypeIndex: {
				required: true,
			}
		},
		data() {
			return {
/* 				主面板菜单
				0 :触发条件  1: 受众用户  2: 出大配置   3: 目标设置 */
				activeIndex: 0,
				//配置文件1 对应触发条件


				dialogVisible: true,
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				form: {
          // TouchType : '',
          triggerTypeIndex :'',
          reachTimeType:'',
					userAttributesArrays: [],
					userActionsArrays: [],
					userActionOrdersArrays: [],
          // userAttributes:'',
          // userActions:'',
          //userOrders: '',
					limitNumberFlag: false,
					limitType: '1',
					resultNum: 0,
					buildType: '01',
					globalStr: '且',
					attributeStr: '且',
					actionStr: '且',
					orderStr: '且',
					taskType: 0,
        },
				eventTypeOptions: [],
				allEventItemMethodOpts: {},
				eventPropertysOptions: {},
				userAttributeOptions: [],
				userPropertysOptions: [],
				ruleTypes3Flag: 0,
				allEventItemListOpts: {},
				pickerOptions: {
					shortcuts: [{
						text: '今日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '昨日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '本周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							const day = start.getDay() || 7;
							var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 -
								day);
							picker.$emit('pick', [newStart, end]);
						}
					}, {
						text: '上周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				indexOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				calcGroupNum: '',

				value: null,
				num: null,
				value1: null,
				radio: null,

        board0Data: {
          reachTimeType: '立即',
          planTypeIndex: 1,
          triggerDateTime:'2022-12-01',
          planName: '',
          groupValue:'',
          triggerDate : '',
          frequency : '',
          triggerTime : '',
          eventA : '',
          reachTimeNum : '',
          reachTimeUnit : '',
          startDate : '2022-12-09',
          startTime : '',
          endDate : '2022-12-10',
          endTime : '',
          eventB : '',
          timeSlotNum : '',
          timeSlotUnit : '',
          supportABTest : '',
        },
        board1Data: {
          userAttributes :'',
          userActions : '',
          userActionOrders : ''
        },
        board2Data: {
          supportABTest : '',
          touch : '',
          touchType : '',
          tickets : '',
          message : '',
          servercePlatform : '',
          theme : '',
          content : '',
          tempateId : '',
          activityId : '',
          activityName : '',
          tagChecked : '',
          doNotDisturb : '',
          notDisturbStartTime : '',
          notDisturbEndTime : '',
          action : '',
        },
        board3Data: {
          mainTriggerTimeNum: '',
          mainTriggerTimeunit : '',
          mainPoint : '',
          targetList : ''
        }
			};
		},
		computed: {
			triggerType() {
				return  this.triggerTypeIndex !== undefined && getTriggerType(this.triggerTypeIndex)
			},

		},

		created() {

		},
		methods: {
      handleBoard0Change(value) {
        console.log(value)
        this.board0Data = value
      },
      handleBoard1Change(value){
        console.log(value)
        this.board1Data = value
      },
      handleBoard2Change(value){
        console.log(value)
        this.board2Data = value
      },
      handleBoard3Change(value){
        console.log(value)
        this.board3Data = value
      },
			handleClose(done) {
				this.$emit('closeCreatePlan')
				if (done) done()
			},

			// handleChange() {
      //
			// },

			addUserAttribute() {
				let userAttribute = {
					attributeName: '',
					attributeRemark: '',
					valueExpression: '',
					dataType: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				this.form.userAttributesArrays.push(userAttribute);
			},


			addUserActions() {
				let userAction = {
					dataRange: [],
					eventItems: [],
					doThings: '',
					eventType: {}
				};
				this.form.userActionsArrays.push(userAction);
			},

			addActionEventItem(itemArray, index) {
				let eventItem = {
					eventItem: {},
					eventItemExpression: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				itemArray.push(eventItem);
			},

			addActionOrders() {
				let actionOrder = {
					dataRange: [],
					eventItems: []
				};
				this.form.userActionOrdersArrays.push(actionOrder);
			},

			addActionOrderEventItem(itemArray) {
				let eventItem = {
					eventId: '',
					eventItem: {},
					eventItemExpression: '',
					valueType: '',
					value1Str: '',
					value2Str: '',
				};
				itemArray.push(eventItem);
			},

      /** 提交按钮 */
      submitForm: function () {
        console.log(this.form.triggerTypeIndex);
        this.form.planTypeIndex = this.board0Data.planTypeIndex;
        this.form.triggerDate = this.board0Data.triggerDate;
        this.form.triggerDateTime = this.board0Data.triggerDateTime;
        this.form.frequency = this.board0Data.frequency;
        this.form.triggerTime = this.board0Data.triggerTime;
        this.form.reachTimeType = this.board0Data.reachTimeType;
        this.form.reachTimeNum = this.board0Data.reachTimeNum;
        this.form.reachTimeUnit = this.board0Data.reachTimeUnit;
        this.form.startDate = this.board0Data.startDate;
        this.form.startTime = this.board0Data.startTime;
        this.form.endDate = this.board0Data.endDate;
        this.form.endTime = this.board0Data.endTime;
        this.form.limitType = this.board0Data.limitType;
        this.form.limitTimeSlot = this.board0Data.limitTimeSlot;
        this.form.limitTimes = this.board0Data.limitTimes;
        this.form.eventA = JSON.stringify(this.board0Data.eventA);
        this.form.eventB = JSON.stringify(this.board0Data.eventB);
        this.form.timeSlotNum = this.board0Data.timeSlotNum;
        this.form.timeSlotUnit = this.board0Data.timeSlotUnit;

        this.form.supportABTest = this.board2Data.supportABTest;
        this.form.touch = this.board2Data.supportABTest;
        this.form.touchType = this.board2Data.touchType;
        this.form.tickets = this.board2Data.tickets;
        this.form.message = this.board2Data.message;
        this.form.servercePlatform = this.board2Data.servercePlatform;
        this.form.theme = this.board2Data.theme;
        this.form.content = this.board2Data.content;
        this.form.tempateId = this.board2Data.tempateId;
        this.form.activityId = this.board2Data.activityId;
        this.form.activityName = this.board2Data.activityName;
        this.form.tagChecked = this.board2Data.tagChecked;
        this.form.doNotDisturb = this.board2Data.doNotDisturb;
        this.form.notDisturbStartTime = this.board2Data.notDisturbStartTime;
        this.form.notDisturbEndTime = this.board2Data.notDisturbEndTime;
        this.form.action = this.board2Data.board2Data;

        this.form.userAttributes = JSON.stringify(this.board1Data.userAttributes);
        this.form.userActions = JSON.stringify(this.board1Data.userActions);
        this.form.userActionOrders = JSON.stringify(this.board1Data.userActionOrders);

        this.form.mainTriggerTimeNum = this.board3Data.mainTriggerTimeNum;
        this.form.mainTriggerTimeUnit = this.board3Data.mainTriggerTimeUnit;
        this.form.mainPoint = JSON.stringify(this.board3Data.mainPoint);
        this.form.targetList = JSON.stringify(this.board3Data.targetList);

        this.form.triggerTypeIndex = this.triggerTypeIndex;
        console.log("!!!"+this.form.triggerTypeIndex );
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updatePlan(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addOperatePlan(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                 // this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },

			preSummaryFun() {
				this.form.name = 'user_group_' + this.form.name;
				let requestJson = JSON.stringify(this.form);
				calcUserGroupNumber({
					requestJson: requestJson
				}).then(response => {
					if (response.code === 200) {
						let num = response.data;
						if (num) {
							this.form.resultNum = num;
							this.calcGroupNum = num + ' 人';
						} else {
							this.calcGroupNum = '所选范围内，没有符合该条件的用户';
						}
					} else {
						this.msgError(response.msg);
					}
				});
			}
		}

	};
</script>
<style lang="scss">
	$base-color-blue: #00BF8A;


	div,
	p {
		padding: 0;
		margin: 0;
	}

	.page-createPaln {

		.el-dialog__header,
		.el-dialog__footer {
			display: none;
		}

		.el-dialog__body {
			padding: 0;
		}

		.page-createPaln-content {
			width: 100%;
			height: 100vh;
			background-color: #F7F9FA;

			.page-header {
				padding: 16px 0 18px 12px;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				background: #fff;
				z-index: 1000;
				box-shadow: 0 2px 11px 0 rgb(175 186 200 / 33%);
				display: flex;
				align-items: center;
				font-size: 15px;

				.pageheader-item {
					color: #778ca2;
					margin-right: 12px;
					font-size: 16px;
					border: none;
					cursor: pointer;
				}

				.trigger-type {
					min-width: 64px;
					color: #4079fb;
					height: 32px;
					line-height: 32px;
					background: #e2ebff;
					border-radius: 3px;
					padding: 0 16px;
					margin-right: 10px;
				}

				.plan-name {
					margin-right: 20px;
				}

				.group-filter {
					&>span {
						display: inline-block;
						margin-right: 10px;
					}
				}
			}

			.left-bar {
				height: calc(100vh - 66px);
				position: fixed;
				left: 0;
				top: 66px;
				// background-color: red;
				width: 240px;
				margin-right: 14px;
				background: #fff;
				padding: 40px 10px 0 16px;
				box-shadow: 0 0 5px 0 rgb(153 170 192 / 17%);
				overflow-y: auto;

				.el-steps--vertical {
					height: 80%;
				}

				.el-step__icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30px;
					height: 30px;
					border: 1px solid #e0e6ed;
					background: #f5f8fc;
					border-radius: 50%;
					position: relative;

					&>i {
						font-size: 20px;
					}
				}

				.el-step__title {
					color: #333;
				}

				.description {
					&>div {
						margin-bottom: 10px;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;
						margin: 0;

						&>span {
							padding: 2px 8px;
							border-radius: 3px;
							margin: 0 8px 10px 0;
						}

						.brown {
							background: rgba(255, 182, 76, .26);
							color: #c37300;
						}

						.violent {
							background: rgba(76, 132, 255, .26);
							color: #4c84ff;
						}
					}

					.sub-title {
						display: inline-flex;
						align-items: center;
						color: #1f2d3d;
						margin-right: 6px;

						&>i {
							color: #c0ccda;
							margin-right: 4px;
						}
					}

					.sub-content {
						color: #8492a6;
					}

					.description-item {
						color: #8492a6;

						i {
							color: #c0ccda;
						}

						.description-item-title {
							color: #1f2d3d;
						}
					}
				}
			}

			.right-board {
				width: calc(100% - 275px);
				height: calc(100vh - 86px);
				background-color: #FFFFFF;
				position: fixed;
				bottom: 0;
				right: 20px;
				border-radius: 4px;

				.pannel {
					height: calc(100% - 64px);
					width: 100%;
					box-sizing: border-box;
					padding: 32px 20px 0;
					overflow-y: auto;

				}

				.board1 {
					@mixin box-base-setup {
						padding: 12px 13px;
						border: 1px solid #dddddd;
						border-radius: 5px;
						margin-bottom: 16px;
					}

					@mixin pointer-line {
						position: absolute;
						height: 100%;
						border: 1px solid $base-color-blue;
						left: 0;
						width: 0;
					}

					@mixin line-span-position {
						position: absolute;
						display: block;
						height: 25px;
						line-height: 25px;
						width: 25px;
						border-radius: 3px;
						background-color: #D6EFE8;
						color: $base-color-blue;
						top: 50%;
						transform: translate(-50%, -50%);
						text-align: center;
					}

					@mixin main-title {
						display: flex;
						position: relative;
						align-items: center;

						&>* {
							margin-right: 10px;
							font-size: 14px;
							font-weight: 600;
							color: #1f2d3d;
						}

						.add-main-item {
							position: absolute;
							right: 0;
							color: #475669;
							font-weight: 400;

							&>i {
								margin-right: 8px;
								color: $base-color-blue;
							}
						}
					}

					@mixin flex-align-center {
						display: flex;
						align-items: center;
					}

					.pannel-title {
						margin-bottom: 20px;
						font-size: 16px;
						font-weight: 700;
					}

					.pannel-content {
						position: relative;
						padding-left: 33px;

						&>.line {
							@include pointer-line;

							span {
								@include line-span-position;
							}
						}

						.user-attribute {
							@include box-base-setup;

							.attribute-title {
								@include main-title;
							}

							.contentProperties {
								position: relative;
								padding-left: 33px;

								.secondButton {
									width: 22px;
									height: 22px;
									line-height: 22px;
									background: #f5faff;
									border-radius: 3px;
									border: 1px solid #d3dce6;
									font-size: 12px;
									color: #99a9bf;
									margin-right: 8px;
								}

								.el-row-mode {
									margin-left: 34px;
									margin-top: 8px;
								}

								.line-item {
									margin-right: 10px;
								}

								.little-line-item {
									margin-right: 6px;
								}

								.indexButton {
									display: inline-block;
									background: #2dca93;
									color: #fff;
									width: 20px;
									height: 20px;
									border-radius: 2px;
									font-size: 14px;
									line-height: 20px;
									text-align: center;
									position: relative;
									margin-right: 14px;
								}

								&>.line {
									@include pointer-line;

									span {
										@include line-span-position;
									}
								}

								.action-item,
								.attribute-item,
								.actionOrder-item {
									margin: 10px 0 0 10px;

									.actionOrder-item-item {
										margin-top: 5px;
									}
								}

								.el-form-item {
									margin-bottom: 0px;
								}
							}

						}

						.user-actions {
							@include box-base-setup;

							.attribute-title {
								@include main-title;
							}

							.contentProperties {
								position: relative;
								padding-left: 33px;

								.el-row-mode {
									margin-left: 34px;
									margin-top: 8px;
								}

								.line-item {
									margin-right: 10px;
								}

								.little-line-item {
									margin-right: 6px;
								}

								.indexButton {
									display: inline-block;
									background: #2dca93;
									color: #fff;
									width: 20px;
									height: 20px;
									border-radius: 2px;
									font-size: 14px;
									line-height: 20px;
									text-align: center;
									position: relative;
									margin-right: 14px;
								}

								&>.line {
									@include pointer-line;

									span {
										@include line-span-position;
									}
								}

								.action-item,
								.attribute-item,
								.actionOrder-item {
									margin: 10px 0 0 10px;

									.actionOrder-item-item {
										margin-top: 5px;
									}
								}

								.el-form-item {
									margin-bottom: 0px;
								}
							}

						}

						.user-actions-order {
							@include box-base-setup;

							.attribute-title {
								@include main-title;
							}

							.contentProperties {
								position: relative;
								padding-left: 33px;

								.secondButton {
									width: 22px;
									height: 22px;
									line-height: 22px;
									background: #f5faff;
									border-radius: 3px;
									border: 1px solid #d3dce6;
									font-size: 12px;
									color: #99a9bf;
									margin-right: 8px;
								}

								.el-row-mode {
									margin-left: 34px;
									margin-top: 8px;
								}

								.line-item {
									margin-right: 10px;
								}

								.little-line-item {
									margin-right: 6px;
								}

								.indexButton {
									display: inline-block;
									background: #2dca93;
									color: #fff;
									width: 20px;
									height: 20px;
									border-radius: 2px;
									font-size: 14px;
									line-height: 20px;
									text-align: center;
									position: relative;
									margin-right: 14px;
								}

								&>.line {
									@include pointer-line;

									span {
										@include line-span-position;
									}
								}

								.action-item,
								.attribute-item,
								.actionOrder-item {
									margin: 10px 0 0 10px;

									.actionOrder-item-item {
										margin-top: 5px;
									}
								}

								.el-form-item {
									margin-bottom: 0px;
								}
							}

						}

					}

					.preview-count-people {
						margin-bottom: 12px;
						font-size: 16px;
						font-weight: 700;
						display: inline-block;
					}

					.caclResult {
						margin-left: 10px;
						color: #475669;
						font-size: 14px;
						line-height: 25px;
						font-weight: bold;
					}
				}

				.board3{
					.main-point{
						margin-bottom: 30px;
						&>.title{
							color: #1f2d3d;
							font-size: 16px;
							font-weight: 550;
							position: relative;
							&>.close-btn{
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}
						.reach-time{
							color: #8492a6;
							padding: 16px 0 10px;
							&>*{
								display: inline-block;
								margin-right: 10px;
							}
						}
					}

					.event-A {
						width: 100%;
						background-color: #F5F8FC;
						box-sizing: border-box;
						padding: 18px 15px;

						.event-A-title {
							display: flex;
							align-items: center;
							position: relative;

							i {
								margin-right: 6px;
								font-size: 16px;
							}

							.add-btn {
								position: absolute;
								right: 0;

								&>i {
									color: #04cb94;
								}
							}
						}

						.event-A-content {
							position: relative;
							// padding-left: 25px;

							.out-line {
								height: 100%;
								width: 0;
								border: 1px solid #D6EFE8;
								margin-right: 10px;
								position: absolute;
								left: 10px;

								&>span {
									position: absolute;
									top: 50%;
									transform: translate(-50%, -50%);
									display: block;
									height: 25px;
									line-height: 25px;
									width: 25px;
									background-color: #D6EFE8;
									border-radius: 3px;
									color: #04cb94;
									text-align: center;
								}
							}

							.event-item {
								// margin-left: 20px;
								margin-top: 20px;

								.main-event {
									height: 42px;

									&>* {
										margin-right: 16px;
									}
								}

								.attach-condition {
									position: relative;

									.statement {
										position: absolute;
										left: 25px;
										height: 100%;
										width: 110px;
										display: flex;
										align-items: center;

										.line {
											border: 1px solid #04cb94;
											margin-left: 16px;
											height: 100%;

										}
									}

									.connection {
										margin-left: 135px;
										margin-top: 16px;
										position: relative;

										.brace-line {
											width: 40px;
											position: absolute;
											top: 50%;
											transform: translateY(-50%);
											display: flex;
											flex-direction: column;
											height: calc(100% - 40px);
											justify-content: center;
											border: 1px solid #D3DCE6;
											border-right: none;

											button {
												background-color: #FFFFFF;
												border: 1px solid #D3DCE6;
												height: 32px;
												line-height: 32px;
												width: 32px;
												text-align: center;
												transform: translateX(-50%);
												border-radius: 3px;
												color: #333;

												&:hover {
													border-color: #04cb94;
													color: #04cb94;
												}
											}

											&>div {
												width: 32px;
											}
										}
									}

									.condition-item {
										display: flex;
										margin-left: 40px;
										align-items: center;
										margin-top: 10px;

										&>* {
											margin-right: 12px;
										}
									}

								}
							}
						}
					}

					.separate-line{
						width: 100%;
						border: 1px solid #E9F0F7;
						margin-bottom: 30px;
					}

					&>.connection{

					}
					.add-target-btn{
						color: #FFFFFF;
						background-color: #00bf8a;
						text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
						box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
						height: 32px;
						line-height: 32px;
						width: 130px;
						border-radius: 3px;
						box-sizing: border-box;
						padding-left: 10px;
						margin-bottom: 60px;
						&>i{
							margin-right: 10px;
						}
					}
				}

				&>.btns {
					height: 64px;
					display: flex;
					align-items: center;
					position: absolute;
					bottom: 0;
					width: 100%;
					border-top: 1px solid #eeeeee;

					&>div {
						padding: 6px 18px;
						border-radius: 2px;
						margin-left: 12px;
						cursor: pointer;
					}

					.previous {
						border: 1px solid #eeeeee;
					}

					.next {
						background-color: #00bf8a;
						color: #FFFFFF;
					}

					.submit {
						position: absolute;
						right: 10px;
						background-color: #00bf8a;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
